<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataZymb } from "@/api/search";
import { addOrUpdateZymb } from "@/api/addOrUpdate";
import { postTableData } from "@/api/table";

const city = window.globalObj.name;
const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();
const editorRef3 = shallowRef();
const editorRef4 = shallowRef();
const editorRef5 = shallowRef();

const toolbarConfig = {};
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const toolbarConfig3 = {};
const toolbarConfig4 = {};
const toolbarConfig5 = {};

const editorConfig = {
  placeholder: "请输入内容...",
};
const editorConfig1 = {
  placeholder: "请输入内容...",
};
const editorConfig2 = {
  placeholder: "请输入内容...",
};
const editorConfig3 = {
  placeholder: "请输入内容...",
};
const editorConfig4 = {
  placeholder: "请输入内容...",
};
const editorConfig5 = {
  placeholder: "请输入内容...",
};
const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");
const mode3 = ref("default");
const mode4 = ref("default");
const mode5 = ref("default");

// 加载html
const initHtml = () => {
  searchDataZymb({ m: "面临的威胁分析" }).then((res) => {
    const { data } = res;
    valueHtml.value =
      data.find((x) => x.k === "集中地区目标和分散目标")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "打击时机")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "打击方式")?.v || "";
    valueHtml3.value = data.find((x) => x.k === "打击规模及威胁程度")?.v || "";
    valueHtml4.value = data.find((x) => x.k === "毁伤效果")?.v || "";
    valueHtml5.value = data.find((x) => x.k === "次生灾害影响预估")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};
const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};
const handleCreated3 = (editor) => {
  editorRef3.value = editor; // 记录 editor 实例，重要！
};
const handleCreated4 = (editor) => {
  editorRef4.value = editor; // 记录 editor 实例，重要！
};
const handleCreated5 = (editor) => {
  editorRef5.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "（1）敌空袭的集中目标<br/>某某区凤阳路石化生产区；某某油田有限责任公司、某某炼化公司及周边石油、石化和电力生产区；林源地区石油储运设施；<br/>（2）敌空袭的分散目标<br/>以非集中形式分布全市的各区（县）的石油、天然气生产和储运设施；东西主城区主要交通、通信枢纽，城市生命线设施等。"
);

const valueHtml1 = ref(
  "（1）当我军实施反“台独”联合作战行动时，或者当由于南海问题与美国发生直接冲突时，美国可能联合日本、韩国、中国台湾地区、东南亚等国军队，为打击我国战争潜力，对某某市的重要目标区进行空袭，主要目的是瘫痪某某石油与石化生产，破坏某某石油能源生产、储备和供应体系，削弱某某战争动员实力和潜力，最终达到牵制我军主要方向的作战行动之企图和目的。<br/>（2）当朝鲜半岛局势突变，朝鲜和韩国发生战事时，美国、韩国为阻止我对朝援助，实现其政治企图，可能联合日本对中朝边境地区实施空中封锁或打击，有可能对某某等战略要地城市实施空中突袭。<br/>（3）当藏南地区与印度发生冲突，甚至战争时，为破坏我对边境地区的支援能力，印可能联合美、日、韩等国，对某某地区石油石化重要生产、储存设施实施空袭。"
);
const valueHtml2 = ref(
  "侦察监视：利用多种媒介传感器，探测目标的红外线、光波、声波、应力（振动）波、无线电波等物理特征信息，从而发现目标并监视其行动。<br/>电磁干扰和压制：主要通过在雷达的调谐频带上产生宽带或窄带的有源噪声信号，在空间辐射形成压制干扰环境，人为地把噪声传给雷达的接收机，增大其输入端的噪声水平，降低其信噪比，从而干扰雷达正常工作。<br/>心理攻击：是战争双方心理上的较量，为取得胜利，通常都对敌施加心理刺激和影响。通过渗透分化、伪装欺骗、心理威慑、感情伤害、暗示诱导等方法向我施加心理刺激和影响，形成心理负担，涣散我方的斗志及凝聚力等。<br/>精确火力打击：精确打击是一种军事战术。通常分为常规精确打击和核精确打击等。主要用于摧毁敌方主战兵器、指挥机构和侦察监视、通信、电子战设备等，也可以选择地打击敌方维系战争潜力的交通、能源设施和军工企业等。"
);
const valueHtml3 = ref(
  "（1）重度破坏：XX%以上的石油化工运输设施遭到破坏，城市生命线工程遭到大面积破坏，城市生产、工作和生活保障功能无法正常运转，数月内无法恢复正常的生产，人民群众生活衣食保障困难，正常社会生活秩序被打乱，发生各类社会动乱和突发事件的潜在风险上升。<br/>（2）中度破坏：约XX—XX%的原油生产设施、城市生命线工程遭到破坏，城市基本功能不能正常运转，短期内难以恢复正常的生产秩序、生活秩序和其他社会保障秩序。<br/>（3）轻度破坏：低于XX%城市生命线工程遭到敌空袭破坏，城市生产与生活功能基本能够维系运转，城市整体功能受到影响较小，经有组织的抢险抢修后能够在短期内恢复正常生产、生活和社会秩序。"
);
const valueHtml4 = ref(
  "高强度打击可能造成部分军事目标重度毁损，部分电力、通信、石化、交通类民用目标重度毁损，重点地区重度毁损，中等强度打击可能造成部分军事目标重度毁损，部分民用目标中度毁损，低强度打击可能造成部分军事目标中度毁损，部分民用目标中度或轻度毁损。"
);
const valueHtml5 = ref(
  "城市主要交通、通信、“生命线”工程可能瘫痪，建筑物倒塌，人员伤亡，造成社会秩序混乱；引发火灾、水灾、有毒物质泄露、病疫爆发等大范围的次生灾害；引发民众心理恐慌，造成社会动荡。"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateZymb({
      m: "面临的威胁分析",
      data: [
        {
          k: "集中地区目标和分散目标",
          v: valueHtml.value,
        },
        {
          k: "打击时机",
          v: valueHtml1.value,
        },
        {
          k: "打击方式",
          v: valueHtml2.value,
        },
        {
          k: "打击规模及威胁程度",
          v: valueHtml3.value,
        },
        {
          k: "毁伤效果",
          v: valueHtml4.value,
        },
        {
          k: "次生灾害影响预估",
          v: valueHtml5.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

// 敌可能重点打击的目标清单
const dknList = ref([]);
const getDknData = () => {
  return postTableData({
    docType: "targetProtection",
    method: "zhongdiandajimubiaoqingdan",
  }).then((res) => {
    if (res.code === 200) {
      dknList.value = res?.data || [];
    }
  });
};

onMounted(async () => {
  initHtml();
  await getDknData();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  const editor3 = editorRef3.value;
  const editor4 = editorRef4.value;
  const editor5 = editorRef5.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  if (!editor3) return;
  if (!editor4) return;
  if (!editor5) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
  editor3.destroy();
  editor4.destroy();
  editor5.destroy();
});

// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};

const tableData = ref();
</script>
<template>
  <div>
    <div class="top-15">
      {{
        city
      }}东西城区，是敌人可能实施空中打击的重点区域。从全市的重要目标分布和敌人空袭企图看，敌人可能空袭的重点区域分为集中地区目标和分散目标两类：
    </div>

    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
    <FirstTitle name="重点打击目标" class="top-15" />
    <div class="top-15 text-center">{{ city }}敌可能重点打击的目标清单</div>
    <el-table
      id="table"
      :data="dknList"
      class="top-15"
      style="width: 100%"
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      border
    >
      <el-table-column prop="rowNum" label="序号" width="100" align="center" />
      <el-table-column prop="jd_name" label="行政区划" />
      <el-table-column prop="name" label="目标名称" />
      <el-table-column prop="detailed_address" label="地址" />
      <el-table-column prop="level" label="目标等级" />
      <el-table-column prop="type" label="目标性质" />
    </el-table>

    <FirstTitle name="打击时机" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig1"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="打击方式" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig2"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>

    <FirstTitle name="打击规模及威胁程度" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef3"
        :defaultConfig="toolbarConfig3"
        :mode="mode3"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml3"
        :defaultConfig="editorConfig3"
        :mode="mode3"
        @onCreated="handleCreated3"
      />
    </div>

    <FirstTitle name="毁伤效果" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef4"
        :defaultConfig="toolbarConfig4"
        :mode="mode4"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml4"
        :defaultConfig="editorConfig4"
        :mode="mode4"
        @onCreated="handleCreated4"
      />
    </div>

    <FirstTitle name="次生灾害影响预估" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef5"
        :defaultConfig="toolbarConfig5"
        :mode="mode5"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml5"
        :defaultConfig="editorConfig5"
        :mode="mode5"
        @onCreated="handleCreated5"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>